<template>
  <div class="h-100 right_box">
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span style="color: #a0a3a8">设备所在辖区</span>
        <treesBox v-if="shuaxingTree" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="problemList">
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <div class="bg-f2 bg-fff">
          <!-- 搜索条件 -->
          <el-form :inline="true" :model="harderBox">
            <el-form-item>
              <el-button type="success" class="max_btn btnSizeStyle" icon="el-icon-plus" :disabled="quanxianBtns.btn1" @click="addUser('添加卡口')">添加卡口</el-button>
            </el-form-item>
            <el-form-item label="卡口类型:">
              <el-select v-model="harderBox.KakouList" :no-data-text="tiText1" clearable filterable placeholder="请选择">
                <el-option v-for="item in kakoulxOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="添加时间:">
              <el-date-picker
                v-model="harderBox.value1"
                type="daterange"
                :picker-options="pickerBeginDateBefore"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :width="260"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="harderBox.nameList" clearable prefix-icon="el-icon-search" placeholder="输入卡口名称" class="search_btn search_icon"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn2()">查询</el-button>
            </el-form-item>
            <!-- <el-form-item><el-button type="primary" size="small" plain>导出</el-button> </el-form-item>
            <el-form-item> <el-button type="primary" size="small" plain @click="Dayin">打印</el-button></el-form-item>-->
          </el-form>
          <!-- 表格 -->
          <el-table
            stripe
            border
            ref="multipleTable"
            :data="rolelist"
            highlight-current-row
            id="printcontent"
            :empty-text="shibaiText"
            :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
            v-loading="tableLoad"
            @sort-change="sortthiscolumn"
          >
            <!-- :default-sort="{ prop: 'tjsj', order: 'descending' }" -->
            <!-- 提示语句 -->
            <template slot="empty">{{ tableMessage }}</template>
            <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
            <!-- <el-table-column type="expand" fixed="left">
            <template slot-scope="scope">
              <ul>
                <li v-for="item in scope.row.ziChanList" :key="item.ID">
                  <div class="openSheBei">
                    <span>
                      <i
                        :class="[iconBtn, 'cao']"
                        @click="caonima"
                        v-show="item.ZCLX !== 53 ? false : true"
                      ></i>
                      {{item.ZCMC}}
                    </span>
                    <el-tag size="medium" type="success" v-show="item.ZCLXMC">{{item.ZCLXMC}}</el-tag>
                    <div class="cedao">
                      控制车道:
                      <span v-for="cao in item.cds" :key="cao.id">{{cao.cdmc}}、</span>
                    </div>
                    <div class="caoxian">朝向：{{item.FXMC}}</div>
                    <div>
                      <el-button
                        type="text"
                        class="color_f56f6f"
                        :disabled="quanxianBtns.btn5"
                        @click="yichuSheb(item.ID)"
                      >移除</el-button>
                      <span class="operation"></span>
                      <el-link
                      :disabled="item.IP !== '' && item.IP !== null ? false : true"
                      :type="item.IP !== '' && item.IP !== null ? 'primary' : 'info' "
                      :underline="false"
                      :href="'http://' + item.IP"
                      target="_blank"
                      >远程控制</el-link>
                      <el-button
                        type="text"
                        :disabled="item.IP !== '' && item.IP !== null ? false : true"
                        class="Btn_nan"
                        @click="yuanChenKZ(item)"
                      >远程控制</el-button>
                      <span class="operation"></span>
                      <el-button
                        type="text"
                        :disabled="item.IP !== '' && item.IP !== null ? false : true"
                        @click="showPingOk(item)"
                      >ping</el-button>
                    </div>
                  </div>
                  <div
                    v-show="iconBtnShow"
                    v-if="item.ZCLX !== 53 ? false : true"
                    class="openSheBei"
                  >
                    <span>369</span>
                    <el-tag size="medium" type="success">123</el-tag>
                    <div>
                      <el-button type="text" class="color_f56f6f">移除</el-button>
                      <span class="operation"></span>
                      <el-button type="text" class="Btn_nan">远程控制</el-button>
                      <span class="operation"></span>
                      <el-button type="text">ping</el-button>
                    </div>
                  </div>
                </li>
              </ul>
            </template>
            </el-table-column>-->
            <el-table-column label="卡口名称" prop="kkmc" :show-overflow-tooltip="true" min-width="150">
              <template slot-scope="scope">
                <svg class="iconfont img_shouji2" aria-hidden="true" v-show="scope.row.zjcount > 0">
                  <use xlink:href="#el-icon-mybinding" />
                </svg>
                <span class="fontColor" v-html="getzcmc(scope.row)" @click="userBox(scope.row)" style="padding-left: 20px"></span>
              </template>
            </el-table-column>
            <el-table-column label="卡口类型" prop="kklx_MC" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="安装地址" prop="xqmc" show-overflow-tooltip min-width="200">
              <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.xqmc + scope.row.jdmc + scope.row.xxdz }}</template>
            </el-table-column>
            <el-table-column label="绑定关系" min-width="100">
              <template slot-scope="scope">
                <el-button type="text" :disabled="scope.row.zjcount > 0 ? false : true" @click="kakoubandin(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="道路等级" prop="dldjmc" min-width="100"></el-table-column>
            <el-table-column label="车道数" prop="cds" min-width="100"></el-table-column>
            <el-table-column label="方向数" prop="fxs" min-width="100"></el-table-column>
            <el-table-column label="触发类型" prop="cflx_MC" min-width="120"></el-table-column>
            <el-table-column label="小型车限速" prop="xcxs" min-width="100"></el-table-column>
            <el-table-column label="大型车限速" prop="dcxs" min-width="100"></el-table-column>
            <el-table-column label="开启人脸" prop="sfkqrl" min-width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.sfkqrl === 1 ? 'success' : 'danger'" size="medium">{{ scope.row.sfkqrl === 1 ? '已启用' : '未启用' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="开启二次识别" prop="sfkqecsb" min-width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.sfkqecsb === 1 ? 'success' : 'danger'" size="medium">{{ scope.row.sfkqecsb === 1 ? '已启用' : '未启用' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
            <el-table-column label="添加时间" prop="tjsj" min-width="150" sortable>
              <template slot-scope="scope">{{ scope.row.tjsj | dateFormat }}</template>
            </el-table-column>
            <el-table-column label="操作" align="right" fixed="right" min-width="150">
              <template slot-scope="scope">
                <div class="operations">
                  <el-button type="text" class="Btn_nan" :disabled="quanxianBtns.btn4" @click="addSheB(scope.row)">绑定</el-button>
                  <span class="operation"></span>
                  <el-button type="text" class="Btn_nan" :disabled="quanxianBtns.btn2" @click="addUser('编辑卡口', scope.row)">编辑</el-button>
                  <span class="operation"></span>
                  <el-button type="text" class="color_f56f6f Btn_nan" :disabled="quanxianBtns.btn3" @click="kaDetele(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row class="page-row">
            <el-col :span="12">
              <div class="bigBOx btnBefore">
                <div class="imgBox">
                  <svg class="iconfont imgIcon" aria-hidden="true">
                    <use xlink:href="#el-icon-mybinding" />
                  </svg>
                  <span>已绑定设备</span>
                </div>
              </div>
            </el-col>
            <el-col :span="12" style="height: 47px; display: table">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="45.8%" :close-on-click-modal="false" @close="offFZ">
      <span slot="title" class="dialogTitle">卡口添加设备</span>
      <ul class="addSheBei">
        <!-- <li>
              <div class="select2">
                <span>辖区:</span>
                <el-cascader
                  placeholder="请选择 / 搜索"
                  v-model="addShebei.xiaqu"
                  filterable
                  :options="cityOptions"
                  :props="{ expandTrigger: 'hover', checkStrictly: true }"
                  clearable
                  class="selectItem2"
                ></el-cascader>
              </div>
        </li>-->
        <!-- <li>
              <div class="select2">
                <span>设备类型:</span>
                <el-cascader
                  v-model.trim="addShebei.sblx"
                  :options="shebeilxOptions"
                  :props="{ checkStrictly: true }"
                  filterable
                  clearable
                  class="selectItem2"
                ></el-cascader>
              </div>
        </li>-->
        <li>
          <el-radio-group v-model="addShebei.sblx" @change="leixingss">
            <el-radio :label="1">设备</el-radio>
            <el-radio :label="2">前卫主机</el-radio>
          </el-radio-group>
        </li>
        <li>
          <el-input :placeholder="kakouTitleName" v-model.trim="addShebei.ss" clearable class="selectItem3"></el-input>
          <el-button type="primary" size="small" class="addShebSearch btnSizeStyle" @click="searchShebei">搜索</el-button>
        </li>
      </ul>
      <el-table
        ref="multipleTable"
        style="margin-top: 50px"
        @select="isCheck2"
        @select-all="isCheckAll2"
        @row-dblclick="rowClick"
        max-height="360"
        border
        :data="addSheBeiName"
        highlight-current-row
        :default-sort="{ prop: 'zcmc', order: 'descending' }"
        v-loading="kaKouTianJiaSheBeiLoad"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
      >
        <template slot="empty">
          <span v-html="kaKouTableMessage"></span>
        </template>
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column label="设备名称" prop="zcmc" sortable show-overflow-tooltip></el-table-column>
        <el-table-column label="设备类型" prop="zclxmc" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="辖区地址" prop="xqmc" show-overflow-tooltip min-width="150">
          <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc }}</template>
        </el-table-column>
        <el-table-column label="设备Ip" prop="ip"></el-table-column>
        <el-table-column label="端口" prop="gldk"></el-table-column>
      </el-table>
      <span slot="footer">
        <div class="footerPagination">
          <!-- <div></div> -->
          <el-pagination
            background
            layout="prev, pager, next, total"
            @current-change="addHandleCurrentChange"
            :current-page.sync="addCurrentPage"
            :total="addTotal"
            :hide-on-single-page="paginationValue"
          ></el-pagination>
          <el-button class="btnSizeStyle" type="primary" @click="addSheBeiXiaB" :disabled="addSheBeiName2.length > 0 ? false : true" size="small">下一步</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible2" :close-on-click-modal="false" width="45.8%" @close="offgou">
      <span slot="title" class="dialogTitle">卡口添加设备</span>
      <el-table
        max-height="360"
        :data="addSheBeiName2"
        border
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
      >
        <el-table-column type="expand" v-if="addShebei.sblx === 1 ? false : true">
          <template slot-scope="scope">
            <ul class="zhujiBox">
              <!-- :style="{minHeight:scope.row.ywzjbdsl*25+'px'}" -->
              <li v-for="item in scope.row.expandList" :key="item.id" ref="shenmgui">
                <div class="zhujiBoxTitle">{{ item.zcmc }}</div>
                <el-select v-model="chedao[item.id]" multiple collapse-tags clearable placeholder="请选择" class="zhujiBoxSelect1">
                  <el-option v-for="item in chedaoOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="chaoxian[item.id]" clearable :no-data-text="tiText2" placeholder="请选择" class="zhujiBoxSelect2">
                  <el-option v-for="item in fanXianOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </li>
              <li class="cneterNull" v-show="scope.row.expandList.length === 0 ? true : false">主机暂未绑定设备</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="已选设备" prop="zcmc" width="350"></el-table-column>
        <el-table-column :render-header="(h, obj) => renderHeader(h, obj, '选择车道', '控制车道')" min-width="120">
          <template slot-scope="scope">
            <el-select
              v-model="chedao[scope.row.id]"
              multiple
              clearable
              :disabled="scope.row.zclx === 53 ? true : false"
              placeholder="请选择"
              style="width: 100%"
              v-show="addShebei.sblx === 1 ? true : false"
            >
              <el-option v-for="item in chedaoOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :render-header="(h, obj) => renderHeader(h, obj, '选择朝向的方向', '朝向')" min-width="120">
          <template slot-scope="scope">
            <el-select
              v-model="chaoxian[scope.row.id]"
              :disabled="scope.row.zclx === 53 ? true : false"
              clearable
              :no-data-text="tiText2"
              placeholder="请选择"
              v-show="addShebei.sblx === 1 ? true : false"
            >
              <el-option v-for="item in fanXianOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <!-- 控制车道 -->
      <!-- <div class="lasIcon" :style="addShebei.sblx === 1 ? 'left: 438px;' : 'left: 482px;'">
        <el-tooltip content="选择车道" placement="top" effect="light">
          <i class="el-icon-warning-outline lasIcon_icon"></i>
        </el-tooltip>
      </div>-->
      <!-- 朝向 -->
      <!-- <div class="lasIcon2">
        <el-tooltip content="选择朝向的方向" placement="top" effect="light">
          <i class="el-icon-warning-outline lasIcon_icon"></i>
        </el-tooltip>
      </div>-->
      <span slot="footer">
        <el-button class="btnSizeStyle" @click="shangYiBu" size="small">上一步</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="submitSheBei" size="small" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 卡口详情 -->
    <el-dialog title="卡口详情" :visible.sync="contractDialogVisible" class="dialogText">
      <el-tabs class="noScorllFixed" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="jbxx">
          <el-row class="p_15">
            <el-col :span="12" class="lineHight">
              <el-row>
                <span class="contentFont">卡口名称：</span>
                <span>{{ contractDetailList.kkmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">卡口类型：</span>
                <span>{{ contractDetailList.kklx_MC }}</span>
              </el-row>
              <el-row class="rowRelative">
                <span class="contentFont">辖区(安装地址)：</span>
                <span>{{ contractDetailList.sfmc + contractDetailList.csmc + contractDetailList.xqmc + contractDetailList.jdmc + contractDetailList.xxdz }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">坐标(经度/纬度)：</span>
                <span>{{ contractDetailList.gpszb }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">车道数：</span>
                <span>{{ contractDetailList.cds }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">方向数：</span>
                <span>{{ contractDetailList.fxs }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">道路等级：</span>
                <span>{{ contractDetailList.dldj }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">触发类型：</span>
                <span>{{ contractDetailList.cflx_MC }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">小型车限速：</span>
                <span>{{ contractDetailList.xcxs }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">大型车限速：</span>
                <span>{{ contractDetailList.dcxs }}</span>
              </el-row>
            </el-col>
            <el-col :span="12" class="lineHight">
              <el-row>
                <span class="contentFont">卡口编号：</span>
                <span>{{ contractDetailList.kkbh }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">关联编号1：</span>
                <span>{{ contractDetailList.glbh1 }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">关联编号2：</span>
                <span>{{ contractDetailList.glbh2 }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">开启人脸：</span>
                <span>
                  <el-tag :type="contractDetailList.sfkqrl === 1 ? 'success' : 'danger'" size="medium">{{ contractDetailList.sfkqrl === 1 ? '已开启' : '未开启' }}</el-tag>
                </span>
              </el-row>
              <el-row>
                <span class="contentFont">开启二次识别：</span>
                <span>
                  <el-tag :type="contractDetailList.sfkqecsb === 1 ? 'success' : 'danger'" size="medium">{{ contractDetailList.sfkqecsb === 1 ? '已开启' : '未开启' }}</el-tag>
                </span>
              </el-row>
              <el-row>
                <span class="contentFont">交通接入服务器：</span>
                <span>{{ contractDetailList.jtjrfwq }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">添加人：</span>
                <span>{{ contractDetailList.createBy }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">添加时间：</span>
                <span>{{ contractDetailList.tjsj | dateFormat }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">更新人：</span>
                <span>{{ contractDetailList.updateBy }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">更新时间：</span>
                <span>{{ contractDetailList.updateDate | dateFormat }}</span>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="图片信息" name="tpxx">
          <el-row class="p_15">
            <el-col :span="24" class="lineHight">
              <el-row style="position: relative">
                <span class="contentFont" style="position: absolute; top: 5px">竣工图：</span>
                <span style="margin-left: 105px">
                  <span v-if="yuLanTP(contractDetailList.jgt).length > 0">
                    <el-image
                      v-for="(item, index) in yuLanTP(contractDetailList.jgt)"
                      :key="index"
                      :style="{ width: '60px', height: '60px', verticalAlign: 'middle', paddingRight: '10px' }"
                      :src="item"
                      :preview-src-list="yuLanTP(contractDetailList.jgt)"
                    >
                      <div slot="error" class="image-slot">
                        <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                      </div>
                    </el-image>
                  </span>
                  <span v-else :style="{ display: 'inline-block', width: '60px', height: '60px', verticalAlign: 'middle', paddingRight: '10px' }">
                    <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                  </span>
                </span>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" type="primary" @click="contractDialogVisible = false">关 闭</el-button>
      </div>
      <!-- <div class="dialogText">
        <el-row>
          <el-col :span="12" class="lineHight">
            <el-row>
              <span class="contentFont">卡口名称： </span>
              {{ contractDetailList.kkmc }}
            </el-row>
            <el-row>
              <span class="contentFont">卡口编号： </span>
              {{ contractDetailList.kkbh }}
            </el-row>
            <el-row>
              <span class="contentFont">添加时间： </span>
              {{ contractDetailList.tjsj | dateFormat }}
            </el-row>
            <el-row>
              <span class="contentFont">卡口类型： </span>
              {{ contractDetailList.kklx_MC }}
            </el-row>
            <el-row>
              <span class="contentFont">辖区： </span>
              {{ contractDetailList.sfmc + contractDetailList.csmc + contractDetailList.xqmc + contractDetailList.jdmc + contractDetailList.xxdz }}
            </el-row>
            <el-row>
              <span class="contentFont">道路等级： </span>
              <span style="color: #e6a23c">{{ contractDetailList.dldj }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">车道数： </span>
              <span style="color: #e6a23c">{{ contractDetailList.cds }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">方向数：</span>
              <span style="color: #e6a23c">{{ contractDetailList.fxs }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">竣工图：</span>
              <el-image
                style="width: 35px; height: 40px; vertical-align: middle"
                :src="contractDetailList.jgt ? yuLanTP(contractDetailList.jgt)[0] : ''"
                :preview-src-list="yuLanTP(contractDetailList.jgt)"
              >
                <div slot="error" class="image-slot">
                  <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                </div>
              </el-image>
            </el-row>
          </el-col>
          <el-col :span="10" class="lineHight">
            <el-row>
              <span class="contentFont">触发类型： </span>
              {{ contractDetailList.cflx_MC }}
            </el-row>
            <el-row>
              <span class="contentFont">小型车限速：</span>
              {{ contractDetailList.xcxs }}
            </el-row>
            <el-row>
              <span class="contentFont">大型车限速：</span>
              {{ contractDetailList.dcxs }}
            </el-row>
            <el-row>
              <span class="contentFont">开启人脸：</span>
              <el-tag :type="contractDetailList.sfkqrl === 1 ? 'success' : 'danger'" size="medium">{{ contractDetailList.sfkqrl === 1 ? '已启用' : '未启用' }}</el-tag>
            </el-row>
            <el-row>
              <span class="contentFont">开启二次识别：</span>
              <el-tag :type="contractDetailList.sfkqecsb === 1 ? 'success' : 'danger'" size="medium">{{ contractDetailList.sfkqecsb === 1 ? '已启用' : '未启用' }}</el-tag>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" @click="contractDialogVisible = false">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="contractDialogVisible = false">确 定</el-button>
      </div>-->
    </el-dialog>
    <!-- 删除卡口 -->
    <el-dialog title="删除" :visible.sync="dialogVisibleDetele" width="30%">
      <span>您确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" @click="dialogVisibleDetele = false">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="deleteItem" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移除设备 -->
    <el-dialog title="移除设备" :visible.sync="dialogVisibleDetele2" width="30%">
      <span>您确定要移除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" @click="dialogVisibleDetele2 = false">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="deleteItem2" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible3" :close-on-click-modal="false" width="45.8%" @close="guanbiCK" class="right_item">
      <span slot="title" class="dialogTitle">查看绑定关系</span>
      <el-form label-width="80px" :model="chakanform" size="small">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="卡口名称：" class="chakanTitle">
              <span>{{ chakanform.kkmc }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡口类型：" class="chakanTitle">
              <span>{{ chakanform.kklx }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车道数：" class="chakanTitle">
              <span>{{ chakanform.chedao }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方向数：" class="chakanTitle">
              <span>{{ chakanform.fangxian }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-radio-group v-model="chakanRadio" size="medium" @change="chakanRadioChange" style="margin-bottom: 15px">
        <el-radio-button :label="1">设备</el-radio-button>
        <el-radio-button :label="2">前卫主机</el-radio-button>
      </el-radio-group>
      <el-table
        max-height="360"
        :data="chakanlist"
        @expand-change="expandChange"
        border
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
      >
        <el-table-column type="expand" v-if="chakanRadio === 1 ? false : true">
          <template slot-scope="scope">
            <ul class="zhujiBox2">
              <li v-for="item in scope.row.cds" :key="item.id" ref="shenmgui">
                <div class="zhujiBox2Title">{{ item.zcmc }}</div>
                <div class="zhujiBox2Select1">
                  <ul class="chakanChedao">
                    <li v-for="(item2, index2) in item.cds" :key="item2.id">{{ item2.cdmc }}{{ item.cds.length - 1 === index2 ? '' : '、' }}</li>
                  </ul>
                </div>
                <div class="zhujiBox2Select2">
                  <span>{{ item.fxmc }}</span>
                </div>
                <div class="zhujiBox2Select3">
                  <el-popover placement="bottom-end" data-container="body" trigger="manual" :ref="`popover2-${item.id}`" @hide="guanbiPopover">
                    <el-form label-width="70px" :model="chakansSelectform" size="small" class="chakanSelectBox">
                      <el-form-item label="控制车道: ">
                        <el-select v-model="chakansSelectform.chadaoshu" multiple collapse-tags clearable placeholder="请选择" style="width: 250px">
                          <el-option v-for="item in chedaoOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="朝向: ">
                        <el-select v-model="chakansSelectform.chaoxian" clearable :no-data-text="tiText2" placeholder="请选择" style="width: 250px">
                          <el-option v-for="item in fanXianOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <div style="margin: 0">
                          <el-button class="btnSizeStyle" size="mini" @click="$refs[`popover2-${item.id}`][1].doClose()">取 消</el-button>
                          <el-button class="btnSizeStyle" type="primary" size="mini" @click="bianjichangkan(item, '主机')">确 定</el-button>
                        </div>
                      </el-form-item>
                    </el-form>
                    <el-button type="text" slot="reference" @click="bianjichedaocaoxian(item)" class="Btn_nan">编辑</el-button>
                  </el-popover>
                </div>
              </li>
              <li class="cneterNull" v-show="scope.row.cds === null ? true : false">主机暂未绑定设备</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column label="设备名称" :prop="chakanRadio === 1 ? 'zcmc' : 'zjmc'" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column label="控制车道" width="300">
          <template slot-scope="scope">
            <ul class="chakanChedao" v-if="chakanRadio === 1 ? true : false">
              <li v-for="(item, index) in scope.row.cds" :key="item.id">{{ item.cdmc }}{{ scope.row.cds.length - 1 === index ? '' : '、' }}</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="朝向" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.zccx }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right" fixed="right" min-width="80">
          <template slot-scope="scope">
            <div>
              <el-popover placement="bottom-end" trigger="manual" data-container="body" :ref="`popover-${scope.$index}`" @hide="guanbiPopover">
                <el-form label-width="70px" :model="chakansSelectform" size="small" class="chakanSelectBox">
                  <el-form-item label="控制车道: ">
                    <el-select v-model="chakansSelectform.chadaoshu" multiple collapse-tags clearable placeholder="请选择" style="width: 250px">
                      <el-option v-for="item in chedaoOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="朝向: ">
                    <el-select v-model="chakansSelectform.chaoxian" clearable :no-data-text="tiText2" placeholder="请选择" style="width: 250px">
                      <el-option v-for="item in fanXianOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <div style="margin: 0">
                      <el-button class="btnSizeStyle" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取 消</el-button>
                      <el-button class="btnSizeStyle" type="primary" size="mini" @click="bianjichangkan(scope, '设备')">确 定</el-button>
                    </div>
                  </el-form-item>
                </el-form>
                <el-button type="text" slot="reference" class="Btn_nan" v-show="chakanRadio === 1 ? true : false" @click="bianjichedaocaoxian(scope)">编辑</el-button>
              </el-popover>
              <span class="operation" v-show="chakanRadio === 1 ? true : false"></span>
              <el-button type="text" :disabled="quanxianBtns.btn5" @click="yichuSheb(scope.row)" class="color_f56f6f Btn_nan">解绑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="footerPagination">
        <!-- <div></div> -->
        <el-pagination
          background
          layout="prev, pager, next, total"
          @current-change="chakanChange"
          :current-page.sync="chakanPage"
          :total="chakanTotal"
          :hide-on-single-page="chakanPaginationValue"
        ></el-pagination>
        <div>
          <el-button class="btnSizeStyle" @click="dialogVisible3 = false" size="small">取 消</el-button>
          <el-button class="btnSizeStyle" type="primary" @click="dialogVisible3 = false" size="small" v-preventReClick>确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { ziC } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import Ping from '@/components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  data: function () {
    return {
      // ping
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      treesBox: {
        url: 'KA_KOU',
        GZKZ: false,
      }, // tree图的请求地址
      shuaxingTree: true, // 刷新tree
      options: [],
      jgmcOptions: [],
      harderBox: {
        nameList: '',
        KakouList: '',
        value1: '',
      },
      addShebei: {
        xiaqu: '',
        sblx: 1,
        ss: '',
        addr: '',
      },
      rolelist: [], // 卡口列表
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      total: 0, // 总条数
      paginationValue: false, // 数据为一条时隐藏
      addTotal: 0,
      addCurrentPage: 1,
      dialogVisible: false, // 添加设备1
      dialogVisible2: false, // 添加设备2
      contractDialogVisible: false, // 卡口详情
      dialogVisibleDetele: false, // 删除卡口
      dialogVisibleDetele2: false, // 移除设备
      dialogVisible3: false, // 查看绑定关系
      num: 0,
      searchFZ: '', // 分组搜索
      addSheBeiName: [],
      addSheBeiName2: [],
      // 资产绑定至前卫主机form
      HostAssets: {
        name: '',
      },
      Hostrules: {
        name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
      },
      contractDetailList: [
        {
          htbh: '123',
        },
      ], // 卡口详情数据
      kakoulxOptions: [], // 卡口类型
      // 删除卡口id
      deleteID: '',
      // 辖区
      // cityOptions: [],
      // shebeilxOptions: [], // 设备类型
      chedao: [], // 绑定车道
      chaoxian: [], // 绑定方向
      chedaoOptions: [], // 车道
      fanXianOptions: [], // 方向
      // 添加设备卡口ID
      kakouID: '',
      yichuID: {
        kkid: '',
        zcid: '',
        type: '',
      }, // 移除设备ID
      // 行数据的Key
      // getRowKeys(row) {
      //   return row.id
      // },
      // expands: [],
      iconBtn: 'el-icon-arrow-right',
      iconBtnShow: false,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      xianQu: null, // 辖区搜索条件
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
        btn4: true,
        btn5: true,
      },
      kakouTitleName: '输入设备名称或设备IP',
      shibaiText: '暂无数据',
      chakanform: {
        kkmc: '',
        kklx: '',
        chedao: '',
        fangxian: '',
        kkid: '',
      },
      chakanRadio: 1, // 查看单选框
      chakanPage: 1, // 查看分页
      chakanTotal: 0, // 查看分页总数
      chakanPaginationValue: false, // 查看分页数据为一条时隐藏
      chakanlist: [],
      chakansSelectform: {
        chadaoshu: [],
        chaoxian: '',
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      tiText1: '暂无数据', // 卡口类型
      tiText2: '暂无数据', // 方向类型
      kaKouTableMessage: '',
      kaKouTianJiaSheBeiLoad: false,
      activeName: 'jbxx',
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  components: { Ping, treesBox },
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  created: function () {
    const { value } = this.$route.params
    if (value) {
      this.harderBox.nameList = value
      this.searchBtn2()
    } else {
      // 获取卡口列表
      this.getZiList()
    }

    this.jurisdictionBtn()
    // 获取用户辖区
    // const city = JSON.parse(getUrl('district'))
    // this.cityOptions = city
    // 获取卡口类型
    this.getkakoulx()
    // 获取设备类型
    // this.getShebeilx()
    // // 获取设备列表
    // this.getShebeiList()
    // 获取方向字典
    this.getfangxian()
  },
  methods: {
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.searchBtn()
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    loadTable() {
      if (this.tableLoad) {
        this.tableLoad = false
        this.rolelist = []
        this.tableMessage = tableMessageText
        this.total = 0
      }
    },
    getzcmc(row) {
      return `<span>${row.kkmc}</span>`
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'ZCZX_KKDJGL_KKLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'kakou:insertKaKou') {
              this.quanxianBtns.btn1 = false // 卡口添加
            } else if (item2.qxdm === 'kakou:updateKaKou') {
              this.quanxianBtns.btn2 = false // 卡口修改
            } else if (item2.qxdm === 'kakou:deleteKaKou') {
              this.quanxianBtns.btn3 = false // 卡口删除
            } else if (item2.qxdm === 'zcgl:bdKaKou') {
              this.quanxianBtns.btn4 = false // 绑定资产
            } else if (item2.qxdm === 'zcgl:jcBDByKaKou') {
              this.quanxianBtns.btn5 = false // 解除资产绑定关系
            }
          })
        }
      })
    },
    yuLanTP(val) {
      const arr = []
      if (val) {
        const aiya = JSON.parse(val)
        aiya.forEach((item) => {
          arr.push(item.url)
        })
      }
      return arr
    },
    caonima() {
      if (this.iconBtn === 'el-icon-arrow-right') {
        this.iconBtnShow = true
        return (this.iconBtn = 'el-icon-arrow-down')
      } else {
        this.iconBtnShow = false
        return (this.iconBtn = 'el-icon-arrow-right')
      }
    },
    // 选择辖区或者资产分组
    // async handleNodeClick(e) {
    //   this.pageSize = 10
    //   this.currentPage = 1
    //   this.searchBtn(1, 10, e)
    //   this.xianQu = e
    // },
    // 获取卡口列表
    getZiList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      // params.append('JGID', user.zzjg_ID)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
      // const { data: res } = await this.$http.post(`${ziC}kakou/selectKaKou`, params)
      // // clearTimeout(a)
      // // endLoading()
      // if (res.code === '0014') {
      //   return
      // } else if (res.code === '0013') {
      //   this.total = 0
      //   return (this.rolelist = [])
      // } else if (res.code !== '0000') {
      //   this.shibaiText = res.message
      //   return this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      // }
      // this.rolelist = res.data.list
      // this.total = res.data.countList
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${ziC}kakou/selectKaKou`, params)
      switch (res.code) {
        case '0000':
          this.rolelist = res.data.list
          this.total = res.data.countList
          break
        default:
          this.rolelist = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    async getkakoulx() {
      const params = new URLSearchParams()
      params.append('LXBS', 1)
      const { data: res } = await this.$http.post(`${ziC}kkdjzd/selectKaKouDianJingZiDian`, params)
      const arr = []
      if (res.code !== '0000') {
        this.kakoulxOptions = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.lxmc,
          }
          arr.push(k)
        })
        this.kakoulxOptions = arr
      }
    },
    // 设备类型
    // async getShebeilx() {
    //   const params = new URLSearchParams()
    //   params.append('FLXID', 0)
    //   const { data: res } = await this.$http.post(`${ziC}zczd/list`, params)
    //   const city = JSON.stringify(res.data.list)
    //   const newCity = city.replace(/id/g, 'value')
    //   const cityList = newCity.replace(/lxmc/g, 'label')
    //   this.shebeilxOptions = JSON.parse(cityList)
    // },
    // 卡口详情
    userBox(scope) {
      this.activeName = 'jbxx'
      this.contractDialogVisible = true
      this.contractDetailList = scope
    },
    addUser(title, scope) {
      if (title === '添加卡口') {
        this.$router.push({
          name: 'Addbayonet', // 路由
          query: {
            // 传递参数
            title: title,
          },
        })
      } else {
        this.$router.push({
          name: 'Addbayonet', // 路由
          query: {
            // 传递参数
            title: title,
            content: scope.id,
          },
        })
      }
    },
    searchBtn2() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    // 查询
    async searchBtn(val) {
      const { nameList, KakouList, value1 } = this.harderBox
      // const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (val) {
        if (val.levels === 1) {
          params.append('SFBM', val.label)
        } else if (val.levels === 2) {
          params.append('CSBM', val.label)
        } else if (val.levels === 3) {
          params.append('XQBM', val.label)
        } else if (val.levels === 4) {
          params.append('JDBM', val.label)
        }
      } else {
        if (this.xianQu) {
          if (this.xianQu.levels === 1) {
            params.append('SFBM', this.xianQu.label)
          } else if (this.xianQu.levels === 2) {
            params.append('CSBM', this.xianQu.label)
          } else if (this.xianQu.levels === 3) {
            params.append('XQBM', this.xianQu.label)
          } else if (this.xianQu.levels === 4) {
            params.append('JDBM', this.xianQu.label)
          }
        }
      }
      // params.append('JGID', user.zzjg_ID)
      params.append('KKLX_ID', KakouList)
      params.append('KKMC', nameList)
      // params.append('M_', size)
      // params.append('N_', current)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      if (value1 !== null) {
        params.append('TJSJSTART', value1[0] || '')
        params.append('TJSJEND', value1[1] || '')
      }
      this.setList(params)
      // const { data: res } = await this.$http.post(`${ziC}kakou/selectKaKou`, params)
      // if (res.code === '0014') {
      //   return
      // } else if (res.code === '0013') {
      //   this.total = 0
      //   return (this.rolelist = [])
      // } else if (res.code !== '0000') {
      //   return this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      // }
      // this.rolelist = res.data.list || []
      // this.total = res.data.countList
    },
    // 搜索设备
    async searchShebei() {
      this.kaKouTableMessage = ''
      this.kaKouTianJiaSheBeiLoad = true
      const { xiaqu, sblx, ss } = this.addShebei
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (sblx === 1) {
        params.append('QCZCLX', 53)
      } else {
        params.append('ZCLX', 53)
      }
      params.append('XZJD', xiaqu)
      params.append('userId', user.id)
      params.append('M_', this.addCurrentPage)
      params.append('N_', 10)
      params.append('BDZT', 0)
      params.append('ZCMC_IP_XH', ss)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectZiChan`, params)
      switch (res.code) {
        case '0000':
          this.addSheBeiName = res.data.list
          this.addTotal = res.data.countList
          break
        case '0013':
          this.addSheBeiName = []
          this.kaKouTableMessage = `<svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mywarning" />
                </svg>【${this.addShebei.addr}】没有对应资产信息!`
          this.addTotal = 0
          break
        default:
          this.addSheBeiName = []
          this.kaKouTableMessage = res.message
          this.addTotal = 0
          break
      }
      this.kaKouTianJiaSheBeiLoad = false
      // if (res.code === '0013') {
      //   console.log('--ssss---')
      //   this.addSheBeiName = []
      //   this.kaKouTableMessage = 'sssss'
      //   this.addTotal = 0
      //   // return (this.addSheBeiName = [])
      //   return
      // }
      // res.data.list.forEach(item => {
      //   if (item.bdzt === 0) {
      //     arr.push(item)
      //   }
      // })
    },
    handleSizeChange(size) {
      this.currentPage = 1
      this.pageSize = size
      this.searchBtn()
    },
    handleCurrentChange(current) {
      this.currentPage = current
      this.searchBtn()
    },
    Dayin: function () {
      // 判断iframe是否存在，不存在则创建iframe
      var iframe = document.getElementById('printIframe')
      if (!iframe) {
        var el = document.getElementById('printcontent')
        iframe = document.createElement('IFRAME')
        var doc = null
        iframe.setAttribute('id', 'printIframe')
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
        document.body.appendChild(iframe)
        doc = iframe.contentWindow.document
        // 这里可以自定义样式
        // doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
        doc.write('<div>' + el.innerHTML + '</div>')
        doc.close()
        iframe.contentWindow.focus()
      }
      iframe.contentWindow.print()
      if (navigator.userAgent.indexOf('MSIE') > 0) {
        document.body.removeChild(iframe)
      }
    },
    // 关闭分组
    offFZ: function () {
      this.dialogVisible = false
      this.addTotal = 0
      this.addCurrentPage = 1
      this.addShebei.ss = ''
      this.addSheBeiName = []
    },
    offgou: function () {
      this.$refs.multipleTable.clearSelection()
      this.chedao = []
      this.chaoxian = []
      this.addSheBeiName2 = []
    },
    async submitSheBei() {
      const { sblx } = this.addShebei
      const params = new URLSearchParams()
      if (sblx === 1) {
        const arrs = []
        this.addSheBeiName2.forEach((item) => {
          const obj = {
            ZCID: item.id,
            CD: this.chedao[item.id],
            FX: this.chaoxian[item.id],
          }
          arrs.push(obj)
        })
        params.append('dbJson', JSON.stringify(arrs))
      } else {
        const arrs2 = []
        const arrs3 = []
        this.addSheBeiName2.forEach((item) => {
          arrs2.push(item.id)
          item.expandList.forEach((item2) => {
            const obj2 = {
              ZCID: item2.id,
              CD: this.chedao[item2.id],
              FX: this.chaoxian[item2.id],
            }
            arrs3.push(obj2)
          })
        })
        params.append('ZJID', arrs2)
        params.append('dbJson', JSON.stringify(arrs3))
      }
      params.append('KKID', this.kakouID)
      params.append('BDLX', sblx)
      const { data: res } = await this.$http.post(`${ziC}zcgl/bdKaKou`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.dialogVisible2 = false
      this.getZiList()
      this.offgou()
    },
    // // 获取设备列表
    // async getShebeiList() {
    //   // const arr = []
    //   const user = JSON.parse(getUrl('userconter'))
    //   const params = new URLSearchParams()
    //   params.append('userId', user.id)
    //   params.append('M_', 1)
    //   params.append('N_', 10)
    //   params.append('BDZT', '0')
    //   const { data: res } = await this.$http.post(`${ziC}zcgl/selectZiChan`, params)
    //   if (res.code === '0013') {
    //     return (this.addSheBeiName = [])
    //   }
    //   // res.data.list.forEach(item => {
    //   //   if (item.bdzt === 0 || item.bdzt === null) {
    //   //     arr.push(item)
    //   //   }
    //   // })
    //   this.addSheBeiName = res.data.list
    //   this.addTotal = res.data.countList
    // },
    // 方向字典
    async getfangxian() {
      const { data: fan } = await this.$http.post(`${ziC}fxzd/selectFangXiang`)
      const arr = []
      if (fan.code !== '0000') {
        this.fanXianOptions = arr
        this.tiText2 = fan.message
      } else {
        fan.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.fxmc,
          }
          arr.push(k)
        })
        this.fanXianOptions = arr
      }
    },
    // 添加设备
    async addSheB(scope) {
      // 车道字典
      const arr2 = []
      scope.kaKouCheDaoList.forEach((item) => {
        const k2 = {
          value: item.id,
          label: item.cdbh,
        }
        arr2.push(k2)
      })
      this.chedaoOptions = arr2
      this.kakouID = scope.id
      this.dialogVisible = true
      this.addShebei.xiaqu = scope.jdbm
      this.addShebei.sblx = 1
      // 拼接后的省市区街道详细地址
      this.addShebei.addr = scope.sfmc + scope.csmc + scope.xqmc + scope.jdmc + scope.xxdz
      this.searchShebei()
    },
    // 添加设备复选框
    isCheck2(selection, row) {
      this.addSheBeiName2 = selection
    },
    // 添加设备复选框全选
    isCheckAll2(selection, row) {
      this.addSheBeiName2 = selection
    },
    addSheBeiXiaB: function () {
      const { sblx } = this.addShebei
      if (sblx === 2) {
        this.addSheBeiName2.forEach((item) => {
          // item.isLoadings = false
          item.expandList = []
          this.gaigechuizi(item, '绑定')
        })
      }

      this.dialogVisible = false
      this.dialogVisible2 = true
    },
    // tabsChange(selection, evt) {
    //   const a = this.expands.findIndex(item => item === selection.id)
    //   if (a !== -1) {
    //     this.expands.splice(a, 1)
    //   } else {
    //     this.expands = []
    //     if (selection) {
    //       this.expands.push(selection.id)
    //     }
    //   }
    // },
    shangYiBu: function () {
      this.dialogVisible = true
      this.dialogVisible2 = false
      this.addShebei.sblx = 1
      this.searchShebei()
    },
    kaDetele(scope) {
      this.deleteID = scope.id
      this.dialogVisibleDetele = true
    },
    // 删除
    async deleteItem() {
      this.dialogVisibleDetele = false
      const params = new URLSearchParams()
      params.append('ID', this.deleteID)
      const { data: res } = await this.$http.post(`${ziC}kakou/deleteKaKou`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.reload()
      this.getZiList()
    },
    // 移除设备
    yichuSheb(item) {
      this.dialogVisibleDetele2 = true
      if (item.zc_ID) {
        this.yichuID = {
          kkid: item.kk_ID,
          zcid: item.zc_ID,
          type: item.bdlx,
        }
      } else {
        this.yichuID = {
          kkid: item.kk_ID,
          zcid: item.zj_ID,
          type: item.bdlx,
        }
      }
    },
    async deleteItem2() {
      const { kkid, zcid, type } = this.yichuID
      const params = new URLSearchParams()
      params.append('KKID', kkid)
      params.append('ZCID', zcid)
      params.append('BDLX', type)
      const { data: res } = await this.$http.post(`${ziC}zcgl/jcBDByKaKou`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.dialogVisibleDetele2 = false
      this.getZiList()
      this.yichuID = {
        kkid: '',
        zcid: '',
        type: '',
      }
      this.guanbiCK()
      // this.getShebeiList()
      // this.expands = []
    },
    yuanChenKZ(scope) {
      if (scope.ZCLXMC === '运维主机' && scope.ZCLX === 53) {
        // this.$router.push('/mainboard')
        localStorage.setItem('SN', scope.SBXLH)
        localStorage.setItem('password', scope.DLMM)
        localStorage.setItem('IP', scope.IP)
        localStorage.setItem('XQBM', scope.XQBM)
        sessionStorage.setItem('mianUrl', '')
        localStorage.setItem('zcmc', scope.ZCMC)
        this.$router.push({ name: 'mainboaredit' })
      } else {
        window.open('http://' + scope.IP, '_blank')
      }
    },
    // ping
    showPingOk(val) {
      this.ping.speedOpen = true
      this.ping.ip = val.IP
      this.ping.name = val.ZCMC
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    // tree形搜索
    treeClick(e) {
      this.pageSize = 10
      this.currentPage = 1
      this.searchBtn(e.type)
      this.xianQu = e.type
    },
    reload() {
      this.shuaxingTree = false
      this.$nextTick(() => (this.shuaxingTree = true))
    },
    // 添加设备
    addHandleCurrentChange(val) {
      this.addCurrentPage = val
      this.searchShebei()
    },
    chakanChange(val) {
      console.log(val)
      this.chakanPage = val
      this.getChakanList()
    },
    // 查看卡口绑定
    kakoubandin(val) {
      // 车道字典
      const arr2 = []
      val.kaKouCheDaoList.forEach((item) => {
        const k2 = {
          value: item.id,
          label: item.cdbh,
        }
        arr2.push(k2)
      })
      this.chedaoOptions = arr2
      this.dialogVisible3 = true
      this.chakanRadio = 1
      this.chakanform = {
        kkmc: val.kkmc,
        kklx: val.kklx_MC,
        chedao: val.cds,
        fangxian: val.fxs,
        kkid: val.id,
      }
      this.getChakanList()
    },
    guanbiCK() {
      // 关闭弹出框
      const popoverClose = Object.values(this.$refs)
      popoverClose.forEach((item) => {
        if (item) {
          if (item.doClose) {
            item.doClose()
          }
        }
      })

      this.dialogVisible3 = false
      this.chakanRadio = 1
      this.chakanPage = 1
      this.chakanTotal = 0
      this.chakanform = {
        kkmc: '',
        kklx: '',
        chedao: '',
        fangxian: '',
        kkid: '',
      }
    },
    chakanRadioChange(val) {
      this.chakanRadio = val
      this.getChakanList()
    },
    async getChakanList() {
      const { kkid } = this.chakanform
      const params = new URLSearchParams()
      params.append('M_', this.chakanPage)
      params.append('N_', 10)
      params.append('KK_ID', kkid)
      params.append('BDLX', this.chakanRadio)
      const { data: res } = await this.$http.post(ziC + 'kkbd/list', params)
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        this.chakanlist = []
        this.chakanTotal = 0
        // this.chakanlist.forEach(item => {
        //   if (item.id === selection.id) {
        //     item.expandList = []
        //     // item.isLoadings = false
        //   }
        // })
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.chakanTotal = res.data.countList
      this.chakanlist = res.data.list
    },
    leixingss(val) {
      if (val === 1) {
        this.kakouTitleName = '输入设备名称或设备IP'
      } else {
        this.kakouTitleName = '输入主机名称或主机IP'
      }
      this.addShebei.sblx = val
      this.searchShebei()
    },
    async expandChange(selection, evt) {
      if (evt.length < 1) {
        return
      }
      this.gaigechuizi(selection, '查看')
    },
    async gaigechuizi(selection, type) {
      const params = new URLSearchParams()
      // params.append('BDZT', 0)
      if (type === '查看') {
        params.append('YWZJBD_ID', selection.zj_ID)
        params.append('HQCD', 1)
      } else {
        params.append('YWZJBD_ID', selection.id)
      }
      params.append('userId', JSON.parse(getUrl('userconter')).id)
      const { data: res } = await this.$http.post(ziC + 'zcgl/selectZiChan', params)
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        // this.addSheBeiName2.forEach(item => {
        //   if (item.id === selection.id) {
        //     item.expandList = []
        //     // item.isLoadings = false
        //   }
        // })
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      if (type === '查看') {
        this.chakanlist.forEach((itemx) => {
          if (itemx.zjmc === selection.zjmc) {
            itemx.cds = res.data.list
          }
        })
      } else {
        this.addSheBeiName2.forEach((item) => {
          if (item.id === selection.id) {
            item.expandList = res.data.list
          }
        })
      }
    },
    async bianjichangkan(val, type) {
      const { chadaoshu, chaoxian } = this.chakansSelectform
      const params = new URLSearchParams()
      if (type === '设备') {
        params.append('ZCID', val.row.zc_ID)
      } else {
        params.append('ZCID', val.id)
      }
      params.append('CX', chaoxian)
      params.append('CDS', chadaoshu)
      const { data: res } = await this.$http.post(`${ziC}zcgl/updateCdCx`, params)
      if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      type === '设备' ? val._self.$refs[`popover-${val.$index}`].doClose() : this.$refs[`popover2-${val.id}`][1].doClose()
      this.searchBtn2()
      this.getChakanList()
    },
    guanbiPopover() {
      // this.chakansSelectform = {
      //   chadaoshu: [],
      //   chaoxian: ''
      // }
    },
    bianjichedaocaoxian(val) {
      // console.log(val)

      const popoverClose = Object.keys(this.$refs)
      const arr = []
      if (val.row) {
        this.chakansSelectform.chaoxian = val.row.fx_ID || ''
        popoverClose.forEach((item) => {
          if (item !== `popover-${val.$index}`) {
            if (item.substr(0, 8) === 'popover-') {
              if (this.$refs[item] && this.$refs[item].doClose) {
                this.$refs[item].doClose()
              }
            }
          }
        })
        this.$refs[`popover-${val.$index}`].doShow()
        val.row.cds.forEach((item3) => {
          arr.push(item3.cdid)
        })
      } else {
        this.chakansSelectform.chaoxian = val.fx_ID || ''
        popoverClose.forEach((item) => {
          if (item !== `popover2-${val.id}`) {
            if (item.substr(0, 8) === 'popover2') {
              if (this.$refs[item].length > 0 && this.$refs[item][1].doClose) {
                this.$refs[item][1].doClose()
              }
            }
          }
        })
        this.$refs[`popover2-${val.id}`][1].doShow()
        val.cds.forEach((item2) => {
          arr.push(item2.cdid)
        })
      }
      this.chakansSelectform.chadaoshu = arr
    },
    renderHeader(h, { column, $index }, labelTips, labelText) {
      return h('div', { class: '', style: 'padding-top:4px;' }, [
        h('span', labelText),
        h(
          'el-tooltip',
          {
            props: {
              content: labelTips,
              placement: 'top',
              effect: 'light',
              offset: '10',
            },
          },
          [
            h('span', {}, [
              h('i', {
                class: 'el-icon-warning-outline',
                style: 'margin-left:6px;font-size: 14px;color: #c8c8c8;cursor: pointer;',
              }),
            ]),
          ]
        ),
      ])
    },
    rowClick(row, column, event) {
      const a = this.addSheBeiName2.findIndex((item) => item.id === row.id)
      if (a !== -1) {
        this.addSheBeiName2.splice(a, 1)
        this.$refs.multipleTable.toggleRowSelection(row, false)
      } else {
        this.addSheBeiName2.push(row)
        const s1 = new Set(this.addSheBeiName2)
        this.addSheBeiName2 = [...s1]
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-icon-circle-close {
//   font-size: 45px;
// }
.operation {
  display: inline-block;
  margin: 0 5px;
  height: 10px;
  border-left: 1px solid #b3b3b3;
}
.left_box {
  border-right: 1px solid #f0f0f0;
  .left_item {
    padding: 15px 5px;
    .el-radio-group {
      display: flex;
      .el-radio-button {
        width: 50%;
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
.img_shouji2 {
  width: 16px;
  height: 16px;
}
.imgIcon {
  vertical-align: middle;
  width: 18px !important;
  height: 18px !important;
}
.right_box {
  .search_btn {
    width: 280px;
  }
  .right_item {
    padding-top: 15px;
    .btn_header {
      height: 35px;
      line-height: 34px;
      margin-bottom: 15px;
      > li:first-child {
        margin-left: 0;
      }
      > li:last-child {
        float: right;
      }
      > li {
        float: left;
        margin-left: 10px;
        .max_btn2 {
          height: 34px;
          line-height: 32px;
          padding: 0 12px;
        }
        .select {
          > span {
            font-weight: 600;
            margin-right: 5px;
          }
          > .el-select {
            width: 170px;
          }
        }
      }
      .max_btn {
        width: 105px;
        height: 34px;
        line-height: 34px;
        padding: 0;
      }
    }
    // .fooer_box {
    //   height: 48px;
    //   line-height: 47px;
    //   padding: 0 15px;
    //   box-sizing: border-box;
    //   border-top: none;
    //   border: 1px solid #eaeaea;
    //   border-top: 0;
    //   display: flex;
    //   justify-content: space-between;
    //   .el-pagination {
    //     padding: 6px 5px;
    //   }
    //   .shoujiBtn {
    //     height: 35px;
    //   }
    //   .bigBOx {
    //     align-items: center;
    //     display: flex;
    //     .imgBox {
    //       display: flex;
    //       align-items: center;
    //       .imgIcon {
    //         width: 14px;
    //         height: 14px;
    //         margin: 0 3px 0 25px;
    //       }
    //       > span {
    //         color: #6d7278;
    //       }
    //     }
    //   }
    // }
    .test-speed1 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      background-color: pink;
    }
    .ping_box {
      width: 100%;
      height: 300px;
      background-color: rgba(0, 0, 0, 0.8);
      overflow: auto;
      > li {
        padding: 0 15px;
        height: 30px;
        line-height: 30px;
        color: #f0f0f0;
      }
    }
  }
  .imgIcon {
    vertical-align: middle;
    width: 18px;
    height: 18px;
  }
  .dialogTitle {
    font-size: 15px;
    font-weight: 600;
  }
  .addSheBei {
    // display: flex;
    // justify-content: space-between;
    > li:first-child {
      // margin-left: 0;
      float: left;
    }
    > li {
      height: 35px;
      line-height: 35px;
      float: right;
      .selectItem3 {
        width: 300px;
      }
      .addShebSearch {
        margin-left: 10px;
      }
    }
    .select2 {
      > span {
        font-weight: 600;
        margin-right: 5px;
      }
      .selectItem2 {
        width: 200px;
        line-height: 0;
      }
    }
  }
  .input-with-select {
    width: 50%;
    .searchFZ_btn {
      width: 40px;
      padding: 10.5px;
      margin: 0;
      background-color: #f5f7fa;
    }
  }
  .dropDown {
    margin-top: 15px;
    width: 840px;
    height: 305px;
    border: 1px solid #eaeaea;
    overflow: auto;
    > li {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      border-bottom: 1px solid #eaeaea;
    }
  }
  .Hostform {
    margin-bottom: 15px;
    .Hostselect {
      width: 260px;
    }
  }
  .lasIcon {
    position: absolute;
    top: 93px;
    .lasIcon_icon {
      font-size: 14px;
      color: #c8c8c8;
      cursor: pointer;
    }
  }
  .lasIcon2 {
    position: absolute;
    top: 94px;
    right: 127px;
    .lasIcon_icon {
      font-size: 14px;
      color: #c8c8c8;
      cursor: pointer;
    }
  }
  .dialogText {
    font-size: 14px;
    color: #333;
    .star {
      color: #f56c6c;
    }
    .contentFont {
      display: inline-block;
      width: 103px;
      color: #7a7a7a;
      text-align: right;
    }
    .lineHight .el-row {
      line-height: 40px;
    }
  }
  .openSheBei {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 10px;
    border-bottom: 1px solid #ebeef5;
    > span {
      position: relative;
      margin-left: 4%;
      .cao {
        position: absolute;
        top: 3px;
        left: -25px;
        cursor: pointer;
      }
    }
    .el-tag {
      position: absolute;
      left: 18%;
    }
    .cedao {
      position: absolute;
      left: 35%;
    }
    .caoxian {
      position: absolute;
      left: 70%;
    }
    .el-link {
      margin-top: -3px;
    }
  }
  .footerPagination {
    display: flex;
    justify-content: space-between;
  }
  .zhujiBox {
    > li {
      height: 40px;
      // line-height: 40px;
      // padding: 20px 0;
      display: flex;
      align-items: center;
      // justify-content: center;
      // border-bottom: 1px solid #ebeef5;
      .zhujiBoxTitle {
        // line-height: 40px;
        position: relative;
        // top: 0;
        left: 10%;
      }
      .zhujiBoxSelect1 {
        width: 30%;
        position: absolute;
        // top: 0;
        left: 49%;
      }
      .zhujiBoxSelect2 {
        width: 16%;
        position: absolute;
        // top: 0;
        right: 1%;
      }
    }
  }
  .zhujiBox2 {
    > li {
      height: 40px;
      // line-height: 40px;
      // padding: 20px 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      .zhujiBox2Title {
        // line-height: 40px;
        position: relative;
        // top: 0;
        left: 10%;
      }
      .zhujiBox2Select1 {
        width: 30%;
        position: absolute;
        // top: 0;
        left: 31%;
      }
      .zhujiBox2Select2 {
        width: 16%;
        position: absolute;
        // top: 0;
        right: 15%;
      }
      .zhujiBox2Select3 {
        // width: 16%;
        position: absolute;
        // top: 0;
        right: 1.3%;
      }
    }
  }
  .chakanTitle {
    color: #333;
    padding: 0;
    margin-bottom: 0;
  }
  .el-radio-group {
    width: 150px;
    display: flex;
    .el-radio-button {
      width: 50%;
      height: 32px;
      line-height: 32px;
    }
  }
  .chakanChedao {
    > li {
      float: left;
    }
  }
  .cneterNull {
    display: flex;
    justify-content: center;
  }
}
.chakanSelectBox {
  // display: flex;
  // align-items: center;
  padding: 15px 15px 0 15px;
}
::v-deep .el-table__expanded-cell {
  padding: 0 !important ;
}
</style>
